<template>

  <div class="flex-row-bet" style="margin-bottom: 40px">
    <el-popover
      v-for="(item, index) in infoCardList"
      :key="index"
      :disabled="!item.content"
      placement="top-start"
      :close-delay="0"
      width="100"
      trigger="hover"
      :content="item.content">
      <info-card slot="reference" :info="item"></info-card>
    </el-popover>


  </div>

</template>

<script>
import InfoCard from "../components/info-card";

export default {
  name: "info-cards",

  components: {
    InfoCard
  },
  mounted() {
    this.$api.abnormalCount().then(res => {
      console.log('count', res.data.data)
      this.infoCardList[2].value = res.data.data
    })
  },

  data() {
    return {
      infoCardList: [{
        name: "寝室户数",
        value: 5004,
        icon: "house",
        content: null
      }, {
        name: "监控时长",
        value: ((Date.now() - Date.parse("2021-09-21")) / 1000 / 3600 / 24).toFixed(0) + "天",
        icon: "time",
        content: null
      }, {
        name: "异常户数",
        value: 20,
        icon: "warning-outline",
        content: "异常分值超过阈值的寝室个数"
      }]
    };
  }
};
</script>

<style scoped>

</style>